<template>
	<view class="bg_fff mb-20 itemBox" @click.stop="clckItem">
		<view class="pd-20 display_row_btn_center" style="padding-right: 0;">
			<view class="itemBaseBox">
				<u-image :src="dataItem.cover" width="100rpx" height="100rpx"></u-image>
				<view class="itemBase f_24">
					<text class="c_333333 title">{{dataItem.name||""}}</text>
					<text class="c_999999 mt-8">{{dataItem.settlement_type.settlement_type_text||""}}</text>
					<view class="display_row_btn_center">
						<!-- <view class="c_999999 mt-8"><text class="c_333333">{{dataItem.p_num||0}}</text>人推广中</view> -->
						<view class="c_999999 mt-8">{{dataItem.end_time.end_time_text||"长期有效"}}</view>
					</view>
				</view>
			</view>
			<view style="flex: 1;" class="display_row_center">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-divider :customStyle="{margin:'0px'}"></u-divider>
		<view class="display_row_btn_center f_24" style="padding: 10rpx 20rpx;">
			<!-- <view class="c_999999 ml-10 status">当前最高收益<text class="c_C62B2C ml-8">￥{{dataItem.topAmount||0}}</text></view> -->
			<view class="c_999999">最高收益<text class="c_C62B2C ml-8">￥{{dataItem.topAmount||0}}</text></view>
			<view class="display_row_btn_center">
				<view class="c_C62B2C f-28" style="margin-right: 20rpx;" @click.stop="goDetail">任务详情></view>
				<view class="c_C62B2C status f-28">推广中</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MissionItem",
		props: {
			dataItem: {
				type: Object,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clckItem() {
				this.$emit("clickItem", this.dataItem);
			},
			goDetail() {
				this.$emit("goDetail", this.dataItem);
			}
		}
	}
</script>

<style scoped>
	.itemBox {
		width: 100%;
		border-radius: 20rpx;
	}

	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 20rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.status {
		border: 1px solid #C62B2C;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>
